import React, {useState} from 'react'
import {Avatar, Button, Card, List} from 'antd';
import {CheckCircleOutlined} from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';

function Index() {
    // 从 Redux store 中获取通知状态
    const notices = useSelector(state => state.notifications.notifications);
    const dispatch = useDispatch(); // 获取 dispatch 函数

    // 处理全部已读
    const handleMarkAllRead = () => {
        dispatch({
            type: 'MARK_ALL_READ'
        });
    };

    /*// 处理全部已读
    const handleMarkAllRead = () => {
        setNotifications(prevNotifications =>
            prevNotifications.map(notification => ({
                ...notification,
                isRead: true
            }))
        );
    };*/

    /*// 处理单个通知的已读状态切换
const handleToggleRead = (id) => {
    setNotifications(prevNotifications =>
        prevNotifications.map(notification =>
            notification.id === id
                ? {...notification, isRead: !notification.isRead}
                : notification
        )
    );
};*/
    const handleMarkRead = (id) => {
        dispatch({
            type: 'MARK_READ',
            payload: id
        });
    };

    // 初始化通知数据，每个通知都有一个已读状态
/*
    const [notifications, setNotifications] = useState([
        {
            id: 1,
            title: '系统通知',
            content: 'Racing car sprays burning fuel into crowd.',
            avatar: 'U',
            isRead: false
        },
        {
            id: 2,
            title: '重要公告',
            content: 'Japanese princess to wed commoner.',
            avatar: 'A',
            isRead: false
        },
        {
            id: 3,
            title: '更新提醒',
            content: 'Australian walks 100km after outback crash.',
            avatar: 'B',
            isRead: false
        },
        {
            id: 4,
            title: '安全警告',
            content: 'Man charged over missing wedding girl.',
            avatar: 'S',
            isRead: false
        },
        {
            id: 5,
            title: '系统维护',
            content: 'Los Angeles battles huge wildfires.',
            avatar: 'M',
            isRead: false
        },
    ]);
*/





    return (
        <Card
            title="通知中心"
            extra={
                <Button
                    type="primary"
                    onClick={handleMarkAllRead}
                >
                    全部已读
                </Button>
            }
        >
            <List
                size="small"
                header={<div>最新通知</div>}
                footer={<div>共 {notices.length} 条通知</div>}
                bordered
                dataSource={notices}
                renderItem={item => (
                    <List.Item
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                            padding: '12px 16px',
                            backgroundColor: item.isRead ? '#f6ffed' : '#fff' // 已读的添加浅绿色背景
                        }}
                    >
                        <div style={{display: 'flex', alignItems: 'center'}}>
                            <Avatar style={{marginRight: 12}}>{item.avatar}</Avatar>
                            <div>
                                <div
                                    style={{
                                        fontWeight: item.isRead ? 'normal' : 'bold',
                                        marginBottom: 4,
                                        color: item.isRead ? '#52c41a' : '#ff4d4f' // 已读的标题变为绿色
                                    }}
                                >
                                    {item.title}
                                </div>
                                <div>{item.content}</div>
                            </div>
                        </div>
                        <Button
                            type={item.isRead ? "default" : "primary"}
                            size="small"
                            icon={item.isRead ? <CheckCircleOutlined/> : null}
                            // todo
                             onClick={() => handleMarkRead(item.id)}
                        >
                            {item.isRead ? "已读" : "标记已读"}
                        </Button>
                    </List.Item>
                )}
            />
        </Card>
    )
}

export default Index
